<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- if this.$emit() has params, there use default name,don't add ()-->
			<cpn @cclick="parentclick"></cpn>
		</div>

		<template id="cpn">
			<div>
				<h3>{{cmessage}}</h3>
				<button v-for="item in clist" @click="cclick(item)">{{item.name}}</button>
			</div>
		</template>

		<script>
			var cpn = {
				template: "#cpn",
				data() {
					return {
						clist: [{
								"id": "aaa",
								"name": "热门推荐"
							},
							{
								"id": "bbb",
								"name": "家居清洁"
							},
							{
								"id": "ccc",
								"name": "品牌服装"
							}, 
							{
								"id": "ddd",
								"name": "数码家电"
							}
						],
						cmessage: "子组件向父组件传递消息"
					}
				},
				methods: {
					cclick: function(item) {
						// console.log("cclick: ",item.name);
						//子传父用 this.$emit("child_function_name", param);
						this.$emit("cclick", item);
					}
				},
				props: {
					//父传子用props
				}
			}

			var vm = new Vue({
				el: "#app",
				data: {

				},
				methods: {
					parentclick: function(item) {
						console.log("parent click!", item.name);
					}
				},
				components: {
					cpn
				}
			})
		</script>
	</body>
</html>
